<template>
  <div class="zcgl-xmgl-tzjl-wrap">
    <el-form
      :ref="editFormRef"
      class="edit-form live-manage-info-audience"
      :model="formData"
      label-width="100px"
      v-for="(item,index) in page.list"
      :key="index"
    >
      <el-form-item label="所属项目：">{{item.ssxm}}</el-form-item>
      <el-form-item label="操作房源：">{{item.czfy}}</el-form-item>
      <el-form-item label="资源类型：">{{item.zylx}}</el-form-item>
      <el-form-item label="面积(m²)：">{{item.mj}}m²</el-form-item>
      <el-form-item label="面积(m²)：">{{item.mj}}m²</el-form-item>
      <div class="status" v-if="item.status=='1'">
        <span class="color-span green"></span> 已生效
      </div>
      <div class="status" v-if="item.status=='2'">
        <span class="color-span yellow"></span> 未生效
      </div>
      <div class="status" v-if="item.status=='3'">
        <span class="color-span red"></span> 不存在
      </div>
    </el-form>
    <div class="zcgl-xmgl-tzjl-bottom"></div>
  </div>
</template>

<script>
export default JBoot({
  props: {},

  data() {
    return {
      moduleName: "fjgl",
      listMethod: "queryRecord"
    };
  },

  computed: {},

  methods: {},

  watch: {}
})
  .list()
  .form()
  .build();
</script>

<style lang="scss">
.zcgl-xmgl-tzjl-wrap {
  padding: 20px;
  .status {
    width: 100%;
    height: 50px;
     font-size: 14px;
      color: #606266;
    .color-span {
      background-color: chocolate;
      padding: 0px 8px;
      margin: 0px 5px 0px 20px;
    }
    .green{
       background-color:#BCE98F;
    }
    .yellow{
       background-color:#FFFFA5;
    }
    .red{
       background-color:#FF0000;
    }
  }
  .zcgl-xmgl-tzjl-bottom{
    border-top: solid #f2f2f2 1px;
  }
}
</style>
